<template>
<div>
  <div >
    <div>
    姓名：<input type="text" v-model="name">

    </div>
    <div>
    年龄：<input type="text" v-model="age">

    </div>
    <div>
    身高：<input type="text" v-model="height">(米)

    </div>
    <div>
    体重：<input type="text" v-model="weight">(公斤)

    </div>
    <div>
    病史：<input type="text" v-model="History">

    </div>
    <button @click="submit">诊断</button>
    <p v-show="isShow">患者 {{name}} 的诊断结果为 {{getFn}} </p >
  </div>
</div>
</template>

<script >
export default {
  data() {
    return {
      name: '',
      age: '',
      height: '',
      weight: '',
      History: '',
      result: '',
      isShow: false,
      bmi:null
    }
  },
  methods: {
    submit() {
      // 提交表单
      // 1. 获取表单数据
      if (this.name === '' || this.age === '' || this.height === '' || this.weight === '') { 
        return alert('请填写完整信息') 
      }
      this.isShow = true
      this.bmi = this.weight / (this.height * this.height)
      this.getFn()
      // this.name = ''
      // this.age = ''
      // this.height = ''
      // this.weight = ''
      // this.History=''
    }
  },
  computed: {
    getFn() {
        if (this.bmi > 29.9) {
        return '肥胖'
      } else if (this.bmi >24.9){
        return'体重过重'
      } else if (this.bmi >18.5){
        return'正常'
      } else {
        return'体重过轻'
      }
    }
  }
}
</script>

<style>

.form {
  width: 300px;
  display: flex;
  flex-direction: column;
}

.item {
  font-weight: 700;
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
button{
  width:50px
}
</style>